import { Upload, Icon, Modal } from 'antd';

export default class PicturesWall extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  state = {
    previewVisible: false,
    previewImage: '',
    fileList: [],
  };

  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = file => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  };

  handleChange = ({ fileList }) => {
    this.setState({ fileList });
    this.props.onChange &&
      fileList.length > 0 &&
      fileList[0].status === 'done' &&
      this.props.onChange(fileList[0].response.fileId);
  };

  render() {
    const { previewVisible, previewImage, fileList } = this.state;
    const props = { ...this.props };
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">{this.props.title}</div>
      </div>
    );
    return (
      <div className="clearfix">
        <Upload
          {...props}
          accept="image/*"
          action="/bgms/file/upload"
          listType="picture-card"
          fileList={fileList}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
        >
          {fileList.length >= 1 ? null : uploadButton}
        </Upload>
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </div>
    );
  }
}
